<template>
	<div class="bg">
		
		<div class="content shadow">
			<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
				<el-form-item label="账号" prop="name">
					<el-input v-model="ruleForm.name" label-position="top"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="ruleForm.password" autocomplete="off" label-position="top">
					</el-input>
				</el-form-item>
				<el-form-item style="margin-bottom: 0;">
					<el-button class="btn" type="primary" @click="submitForm('ruleForm')">提交</el-button>
					<el-button class="btn" @click="resetForm('ruleForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				ruleForm: {
					name: '',
					password: ''
				},
				rules: {
					name: [{
						required: true,
						message: '账号不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}],
				}
			}
		},

		methods: {
			...mapMutations(['ADD_USER']),
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.axios.post("/admin/index/login", this.ruleForm).then(res => {
								this.ADD_USER(res)
								this.$message.success({
									message: "成功",
									onClose: (res) => {
										this.$router.push({
											path: "/"
										}, () => {
											location.reload()
										});
									}
								})
							})
							.catch(error => {})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
	}
</script>

<style>
	.bg{
		background-image: url(../../assets/image/loginBg.jpg) ;
		background-size: cover;
		width: 100%;
		height: 100vh;
	}
	.content{
		margin: auto;
		width: 300px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		padding: 50px ;
		z-index: 999;
		background: #FFFFFF;
	}

	.btn{
		width: 100px;
	}
</style>
